<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-11-10 11:11:14
 * @Description: 
-->
<template>
  <div v-if="option.display">
    <!-- <van-field
      :name="option.prop"
      :value="comValue"
      :label="option.label"
      :rows="option.minRows || 2"
      :show-word-limit="option.showWordLimit"
      :maxlength="option.maxlength"
      :placeholder="
        option.placeholder ? option.placeholder : '请输入' + option.label
      "
      @input="$emit('input', $event.trim())"
      :type="getType()"
      input-align="right"
      :readonly="option.readonly"
      :disabled="option.disabled"
      :required="option.required"
      :style="detailValue ? 'pointer-events: none;' : ''"
      :rules="[{ required: option.required }]"
    /> -->
    <uni-forms-item
      :label="option.label"
      :required="option.required"
      :rules="[{ required: option.required, errorMessage: '必填项不能为空' }]"
      :name="option.prop"
    >
    <!-- 原生控件的层级是最高的，前端组件无法覆盖原生控件的层级。 -->
    <!-- input,textarea仅在微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序中且input置焦时表现为原生组件 -->

    <!-- 结果只是相对定位弹窗没设置层级z-index: 100;！！！ -->

      <uni-easyinput
        v-model="comValue"
        :placeholder="
          option.placeholder ? option.placeholder : '请输入' + option.label
        "
        :style="detailValue ? 'pointer-events: none;' : ''"
        :disabled="detailValue"
        :type="getType()"
      />
      <!-- 换成uView测试，也一样 -->
      <!-- <u--input
        v-model="comValue"
        :placeholder="
          option.placeholder ? option.placeholder : '请输入' + option.label
        "
        :style="detailValue ? 'pointer-events: none;z-index: 10' : 'z-index: 10'"
        :disabled="detailValue"
        :type="getType()"
      /> -->
    </uni-forms-item>
  </div>
</template>

<script>
export default {
  name: "auni-input",
  props: {
    option: Object,
    value: [String, Number,Object],
  },
  data() {
    return {
      inputType: "",
      comValue: this.value[this.option.prop] || "",
    };
  },
  computed: {
    // comValue: {
    //   get() {
    //     console.log('this.value :>> ', this.value);
    //     console.log("this.option :>> ", this.option);
    //     return this.value[this.option.prop] || "";
    //   },
    //   set(val) {
    //     // 触发value绑定值的交互与更新
    //     this.$emit("input", val);
    //   },
    // },
    // 处理详情模式
    detailValue() {
      // console.log("this.option :>> ", this.option);
      if (this.option.detail) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(newV) {
        // console.log('input watch :>> ', newV);
        // 触发value绑定值的交互与更新
        // this.$emit("input", newV);
      },
    },
    comValue: {
      deep: true,
      immediate: true,
      handler(newV) {
        // console.log('input comValue :>> ', newV);
        // 触发value绑定值的交互与更新
        // this.$emit("input", newV);
        // this.value[this.option.prop] = newV;
        this.$emit("change",newV,this.option.prop)
      },
    },
  },
  methods: {
    getType() {
      switch (this.option.type) {
        case "password":
          return "password";
        // 多行文本
        case "textarea":
          return "textarea";
      }
      return "text";
    },
  },
};
</script>

<style></style>
